<template>
  <div class="story" :class="modell">
    <link rel="stylesheet" type="text/css" :href="storyData.css" />
    <div class="hd" v-if="flag">
      <img :src="storyData.image" width="100%" height="100%" alt />
      <p class="title">{{storyData.title}}</p>
    </div>
    <div v-html="storyData.body" :class="modell"></div>
    <div class="footer"></div>
    <div class="navbar">
      <div class="goback" @click="Goback"></div>
      <div class="item comments" @click="openComments()">{{storyextraData.comments}}</div>
      <div
        class="item popularity"
        @click="onPopularity"
        :class="{popularity_active:popularityActive}"
      >{{storyextraData.popularity}}</div>
      <div class="item shoucang" :class="{shoucang_active:shoucangActive}" @click="onShoucang"></div>
      <div class="item fenxiang"></div>
    </div>
    <van-popup v-model="show" position="bottom" :style="{ height: '100%',width:'100%',}" round>
      <div class="comments-content">
        <div class="count">{{shortCommentsData.length+longCommentsData.length}}条评论</div>
        <div class="close" @click="closeComments"></div>
        <div
          class="comments-content-type"
          v-if="longCommentsData.length>0"
        >{{longCommentsData.length}}条长评</div>
        <div class="comments-info" v-if="longCommentsData.length>0">
          <div class="long-comments" v-for="(e,i) in longCommentsData" :key="i">
            <p class="copy">...</p>
            <div class="avatar">
              <img :src="e.avatar" width="100%" height="100%" />
            </div>
            <div class="comments-text">
              <div class="author">{{e.author}}</div>
              <div class="content">{{e.content}}</div>
              <div class="comments-bottom">
                <div class="time">{{e.time | getTime}}</div>
                <div class="dianzan">{{e.likes}}</div>
                <div class="pinglun"></div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="comments-content-type"
          v-if="shortCommentsData.length>0"
        >{{shortCommentsData.length}}条短评</div>
        <div class="comments-info" v-if="shortCommentsData.length>0">
          <div class="long-comments" v-for="(item,index) in shortCommentsData" :key="index">
            <p class="copy">...</p>
            <div class="avatar">
              <img :src="item.avatar" width="100%" height="100%" />
            </div>
            <div class="comments-text">
              <div class="author">{{item.author}}</div>
              <div class="content">{{item.content}}</div>
              <div class="comments-bottom">
                <div class="time">{{item.time | getTime}}</div>
                <div class="dianzan">{{item.likes}}</div>
                <div class="pinglun"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="add-comments" @click="addComments()">
        <div class="touxiang">
          <img src="https://pic1.zhimg.com/da8e974dc_s.jpg" width="100%" height="100%" alt />
        </div>
        <input
          class="comments-text"
          type="text"
          name
          v-model="commentsText"
          value
          placeholder="说说你的看法..."
        />
        <div class="send" @click="send">发送</div>
      </div>
    </van-popup>
    <van-popup v-model="showLogin" position="bottom" round :style="{height:'55%'}">
      <login v-on:close="cloesLogin"></login>
    </van-popup>
  </div>
</template>
<script>
import Login from "../components/login.vue";
export default {
  components: {
    Login
  },
  data() {
    return {
      modell: "",
      popularityActive: false,
      flag: false,
      showLogin: false,
      shoucangActive: false,
      storyData: {},
      show: false,
      storyextraData: {},
      longCommentsData: {},
      shortCommentsData: {},
      commentsText: "",
      collection: []
    };
  },
  filters: {
    getTime(time) {
      //年月日时分秒
      var now = new Date(time);
      var yue = (now.getMonth() + 1).toString().padStart(2, "0");
      var ri = now
        .getDate()
        .toString()
        .padStart(2, "0");
      var shi = now
        .getHours()
        .toString()
        .padStart(2, "0");
      var fen = now
        .getMinutes()
        .toString()
        .padStart(2, "0");
      var miao = now
        .getSeconds()
        .toString()
        .padStart(2, "0");
      return `${yue}-${ri} ${shi}:${fen}:${miao}`;
    }
  },
  created() {
    this.onShoucangActive();
    this.collection = JSON.parse(localStorage.getItem("usercollection")) || [];
    this.modell = localStorage.getItem("modell");
    this.$nextTick(() => {
      this.GetStoryContentById(this.$route.params.storyid);
      this.GetStoryExtra(this.$route.params.storyid);
      this.GetcommentsByid(this.$route.params.storyid, "short-comments");
      this.GetcommentsByid(this.$route.params.storyid, "long-comments");
    });
  },
  methods: {
    GetStoryContentById(id) {
      this.axios({
        methods: "get",
        url: "story/" + id
      })
        .then(async result => {
          this.storyData = result.data.story;
          await (this.storyData.body = this.storyData.body.replace(
            '<div class="headline">\n\n<div class="img-place-holder"></div>\n\n\n\n</div>',
            ""
          ));
          this.flag = true;
          //   await (this.storyData.body = this.storyData.body.replace(
          //     '\n\n<div class="img-place-holder"></div>\n\n\n\n',
          //     `\n\n<div class="img-place-holder">\n<img src="${this.storyData.image}" width="100%" height="100%" alt=""></div>\n\n\n\n`
          //   ));
        })
        .catch(err => {
          console.log(err);
        });
    },
    GetStoryExtra(id) {
      this.axios({
        methods: "get",
        url: `story/${id}/extra`
      })
        .then(result => {
          this.storyextraData = result.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    GetcommentsByid(id, type) {
      this.axios({
        methods: "get",
        url: `story/${id}/${type}`
      })
        .then(result => {
          if (type == "short-comments") {
            this.shortCommentsData = result.data.comments;
          } else {
            this.longCommentsData = result.data.comments;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    Goback() {
      this.$router.back();
    },
    openComments() {
      this.show = true;
    },
    closeComments() {
      this.show = false;
    },
    onPopularity() {
      if (localStorage.getItem("isLogin")) {
        this.popularityActive = !this.popularityActive;
        this.popularityActive
          ? this.storyextraData.popularity++
          : this.storyextraData.popularity--;
      } else {
        this.showLogin = true;
      }
    },
    onShoucang() {
      if (localStorage.getItem("isLogin")) {
        this.shoucangActive = !this.shoucangActive;
        if (this.shoucangActive) {
          this.collection.push(this.$route.params.storyid);
          localStorage.setItem(
            "usercollection",
            JSON.stringify(this.collection)
          );
          this.$toast("收藏成功");
        } else {
          for (let i = 0; i < this.collection.length; i++) {
            if (this.collection[i] == this.$route.params.storyid) {
              this.collection.splice(i, 1);
            }
          }
          localStorage.setItem(
            "usercollection",
            JSON.stringify(this.collection)
          );
          this.$toast("取消收藏");
        }
      } else {
        this.showLogin = true;
      }
    },
    cloesLogin() {
      this.showLogin = false;
    },
    addComments() {
      if (localStorage.getItem("isLogin")) {
        return;
      } else {
        this.showLogin = true;
      }
    },
    send() {
      if (this.commentsText == "") {
        return;
      }
      let comments = {};
      comments.author = "知乎用户";
      comments.time = Date.now();
      comments.content = this.commentsText;
      comments.avatar =
        "https://pic2.zhimg.com/84aa03ad32d328354dc96485a1637f67_l.jpg?source=8673f162";
      comments.likes = 0;
      if (this.commentsText.length > 50) {
        this.longCommentsData.push(comments);
        this.commentsText = "";
      } else {
        this.commentsText = "";
        this.shortCommentsData.push(comments);
      }
      this.storyextraData.comments++;
    },
    onShoucangActive() {
      if (localStorage.getItem("usercollection")) {
        let usercollection = JSON.parse(localStorage.getItem("usercollection"));
        for (let i = 0; i < usercollection.length; i++) {
          if (usercollection[i] == this.$route.params.storyid) {
            this.shoucangActive = true;
          }
        }
      }
    }
  }
};
</script>
<style lang="less" scoped>
.hd {
  height: 300px;
  width: 100%;
  position: relative;

  .title {
    position: absolute;
    left: 20px;
    width: 80vw;
    color: rgba(255, 255, 255);
    font-size: 20px;
    bottom: 0px;
  }
}
.view-more {
  margin-bottom: 8vh;
}
.footer {
  margin-bottom: 20px;
}
.navbar {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 8vh;
  background-color: #fff;
  align-items: center;
  display: flex;
  .item {
    width: 50px;
    margin-left: 10px;
    height: 30px;
    text-indent: 40px;
    margin-right: 20px;
    font-size: 10px;
  }
  .goback {
    height: 30px;
    margin-left: 20px;
    border-right: 1px solid rgb(203, 197, 197);
    width: 50px;
    background: url("../assets/weibiaoti.png") no-repeat left;
    background-size: 50%;
  }
  .comments {
    text-indent: 39px;
    line-height: 30px;
    padding-top: 1px;
    background: url("../assets/pinglun.png") no-repeat center;
    background-size: 40%;
  }
  .popularity {
    background: url("../assets/dianzan.png") no-repeat center;
    background-size: 50%;
  }
  .popularity_active {
    background: url("../assets/dianzan_active.png") no-repeat center;
    background-size: 50%;
  }
  .shoucang {
    background: url("../assets/shoucang.png") no-repeat center;
    background-size: 55%;
  }
  .shoucang_active {
    background: url("../assets/shoucang_active.png") no-repeat center;
    background-size: 55%;
  }
  .fenxiang {
    background: url("../assets/fenxiang.png") no-repeat center;
    background-size: 55%;
  }
}
.comments-content {
  margin-bottom: 34px;
  position: relative;
  margin-top: 10px;
  padding: 0 20px;
  .close {
    position: absolute;
    right: 20px;
    width: 20px;
    height: 20px;
    background: url("../assets/close.png") no-repeat center;
    background-size: 100%;
    top: 0;
  }
  .count {
    text-align: center;
    font-size: 18px;
  }
  .comments-content-type {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
  }
  .comments-info {
    .long-comments {
      margin-bottom: 10px;
      border-bottom: 1px solid rgb(212, 208, 208);
      display: flex;
      position: relative;
    }
    .copy {
      right: 0;
      color: darkgray;
      top: -35px;
      font-size: 25px;
      position: absolute;
    }
    .avatar {
      border-radius: 50%;
      margin-bottom: auto;
      width: 35px;
      height: 35px;
      overflow: hidden;
      margin-right: 10px;
    }
    .comments-text {
      flex: 1;
      .author {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 10px;
      }
      .content {
        margin: 0;
        font-size: 14px;
        color: #000;
      }
      .comments-bottom {
        display: flex;
        margin: 10px 0px;
        align-items: center;
        .time {
          font-size: 12px;
          color: rgb(159, 158, 158);
        }
        .dianzan {
          text-indent: 22px;
          margin-left: auto;
          width: 20px;
          height: 20px;
          background: url("../assets/dianzan.png") no-repeat center;
          background-size: 100%;
        }
        .pinglun {
          margin-left: 40px;
          background: url("../assets/pinglun.png") no-repeat center;
          background-size: 100%;
          width: 17px;
          height: 17px;
        }
      }
    }
  }
}
.add-comments {
  background-color: rgb(235, 235, 235);
  display: flex;
  align-items: center;
  width: 100%;
  position: fixed;
  bottom: 0;
  right: 0;
  .touxiang {
    margin-left: 10px;
    width: 32px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
  }
  .comments-text {
    margin-left: 10px;
    background-color: rgb(235, 235, 235);
    border: none;
    height: 35px;
    width: 100%;
  }
  .send {
    width: 50px;
  }
}
/deep/.dark {
  color: #fff !important;
  .content-wrap {
    background: #000 !important;
    background-color: #000 !important;
    color: white !important;
  }
}
</style>